<html>

<head>
    <meta charset="utf-8">
    <meta name="author" content="范珍">
    <title>vue进阶--7 自定义指令</title>
    <script src='vue.js'></script>
</head>

<body>
    <!--
            autofocus:自动获取焦点
        -->
    <!--<input type="text" autofocus>-->


    <div id='app'>
        <input type="text" v-focus>
    </div>
    <script>
        // directive：指令
        // 注册全局指令;
        // para1：指令名称;使用的时候注意添加v-前缀
        // para2: 指令的配置选项
        Vue.directive('focus', {
            // inserted:指令的钩子函数
            // inserted:指令所在的标签插入dom时,会自动执行;
            inserted: function (el) {
                console.log('标签被插入dom了');
                // 元素聚焦
                el.focus();
            }
        })
        new Vue({
            el: '#app',
            // 局部注册
            // directives: {
            //     'focus': {
            //         inserted: function (el) {
            //             console.log('标签被插入dom了');
            //             // 元素聚焦
            //             el.focus();
            //         }
            //     }
            // }
        })
    </script>
</body>

</html>